<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<view class="pc">
				<y-bread :name="pageName"></y-bread>
			</view>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<view class="infopass" v-show="!is_show">
						<view class="imgbox">
							<image src="/static/icon/protect_private_info.svg" mode="widthFix"></image>
						</view>
						<view class="info-title">
							{{$t('index.hyjbzl')}}
						</view>
						<view class="infotips">
							{{$t('index.hzltip')}}
						</view>
						<view class="infobtn">
							<button @click="showInfo">{{$t('index.zshyzl')}}</button>
						</view>
					</view>

					<view class="infobox" v-show="is_show">
						<view class="orderlist-title">
							<text>{{$t('index.hyjbzl')}}</text>
						</view>
						<view class="info-add-tips">
							{{$t('index.ljtx')}}
						</view>
						<view class="info-add-box">
							<view class="addli must addline">
								<view class="addtext">
									<text>*</text>{{$t('index.zh')}}
								</view>
								<view class="addinput">
									<uni-easyinput v-model="username" disabled
										:placeholder="$t('index.qsrsjh')"></uni-easyinput>
								</view>
							</view>
							<view class="addli must ">
								<view class="addtext">
									<text>*</text>{{$t('index.xing')}}
								</view>
								<view class="addinput">
									<uni-easyinput v-model="surname" :placeholder="$t('index.qsrx')"></uni-easyinput>
								</view>
							</view>
							<view class="addli must ">
								<view class="addtext">
									<text>*</text>{{$t('index.m')}}
								</view>
								<view class="addinput">
									<uni-easyinput v-model="name" :placeholder="$t('index.qsrm')"></uni-easyinput>
								</view>
							</view>
							<view class="addli must ">
								<view class="addtext">
									<text>*</text>{{$t('index.birth')}}
								</view>
								<view class="addinput">
									<uni-datetime-picker type="date" :clear-icon="false" v-model="birth" />
								</view>
							</view>
							<view class="addli must ">
								<view class="addtext">
									<text>*</text>{{$t('index.sex')}}
								</view>
								<view class="addinput">
									<radio-group name="" @change="changeSex">
										<label>
											<radio :checked="sex == 1" value="1" /><text>{{$t('index.man')}}</text>
										</label>
										<label>
											<radio :checked="sex == 0" value="0" /><text>{{$t('index.nv')}}</text>
										</label>
									</radio-group>
								</view>
							</view>
							<view class="addli addline ">
								<view class="addtext">
									{{$t('index.sndh')}}
								</view>
								<view class="addinput">
									<uni-easyinput v-model="snphone" :placeholder="$t('index.qsrsndh')"></uni-easyinput>
								</view>
							</view>
							<view class="addli must addline ">
								<view class="addtext">
									<text>*</text>{{$t('index.dzyj')}}
								</view>
								<view class="addinput">
									<uni-easyinput v-model="email" :placeholder="$t('index.qsrdzyj')"></uni-easyinput>
								</view>
							</view>
							<view class="addli must addline ">
								<view class="addtext">
									<text>*</text>{{$t('index.gj')}}
								</view>
								<view class="addinput">
									<uni-data-select v-model="nation" :localdata="nationRange"
										@change="changeNation"></uni-data-select>
								</view>
							</view>
							<view class="addli must addline ">
								<view class="addtext">
									<text>*</text>{{$t('index.dz')}}
								</view>
								<view class="addinput">
									<uni-easyinput v-model="address" :placeholder="$t('index.qsrdz')"></uni-easyinput>
								</view>
							</view>
							<view class="addli must addline ">
								<view class="addtext">
									<text>*</text>{{$t('index.yzqh')}}
								</view>
								<view class="addinput">
									<uni-easyinput v-model="zip" :placeholder="$t('index.qsryzqh')"></uni-easyinput>
								</view>
							</view>
						</view>
						<view class="info-finish">
							<button @click="finish">{{$t('index.txwc')}}</button>
						</view>
					</view>

				</view>
			</view>
			<y-model :modelMsg="modelMsg" :showModel="showModel" @getModel="getModel"></y-model>
		</view>
	</view>
</template>

<script>
	import {
		getParam,
		editUserInfo,
		UserInfo
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.hyjbzl'),
				modelMsg: this.$t('index.qrqx'),
				showModel: false,
				is_show: false,
				phone: '',
				birth: '',
				surname: '',
				name: '',
				snphone: '',
				email: '',
				sex: '',
				nation: '',
				nationRange: [],
				address: '',
				zip: '',
				username: '',
				info: []
			}
		},
		onLoad() {
			this.UserInfo()
			this.getParam()
		},
		methods: {
			finish() {
				editUserInfo({
					first_name: this.name,
					last_name: this.surname,
					birth: this.birth,
					sex: this.sex,
					phone: this.snphone,
					email: this.email,
					nation: this.nation,
					address: this.address,
					zip: this.zip
				}).then(res => {
					uni.$showMsg(res.msg)
				})
			},
			UserInfo() {
				UserInfo().then(res => {
					let info = res.data.user
					this.email = info.email
					this.username = info.username
					this.name = info.first_name
					this.surname = info.last_name
					this.birth = info.birth
					this.snphone = info.phone
					this.nation = info.nation
					this.address = info.address
					this.zip = info.zip
					this.sex = info.sex.value
				})
			},
			getParam() {
				var that = this
				getParam().then(res => {
					res.data.nation.forEach(item => {
						that.nationRange.push({
							text: item.name,
							value: item.id
						})
					})
				})
			},
			changeNation(e) {},
			changeSex(e) {
				this.sex = e.detail.value
			},
			showInfo() {
				this.is_show = true
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;

			.orderlist {
				margin-top: 15px;

			}

			.orderlist-title {
				font-size: 22px;
				border-left: 3px solid #4a4e5c;
				padding-left: 7px;
			}

			.infobox {
				.info-add-box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}

				.addli {
					width: 49%;
					margin-bottom: 15px;

					&.addline {
						width: 100%;
					}

					.addtext {
						font-size: 14px;
						color: #666666;

						text {
							color: #ff5353;
							margin-right: 5px;
						}
					}

					.addinput {
						height: 40px;
						line-height: 40px;
					}

					radio {
						transform: scale(.7);
					}

					label {
						font-size: 14px;
						margin-top: 15px;
					}
				}

				.info-add-tips {
					margin: 20px 0;
					font-weight: 600;
					color: #333333;
					font-size: 14px;
				}

				.info-add-box {
					line-height: 2;
					border: 1px solid #dddddd;
					padding: 20px;
				}

				.info-finish {
					width: 200px;
					margin-top: 20px;

					button {
						border-radius: 4.5px;
						font-size: 14px;
						text-align: center;
						box-sizing: border-box;
						display: inline-block;
						background-color: #ff5353;
						color: rgb(255, 255, 255);
						cursor: pointer;
						border: 1px solid #ff5353;
						width: 100%;
						height: 40px;
						line-height: 40px;
					}
				}
			}

			.infopass {
				padding: 40px 20px;
				border-radius: 10px;
				border: 1px solid #ececec;
				display: flex;
				flex-direction: column;
				-webkit-box-align: center;
				align-items: center;
				-webkit-box-pack: center;
				justify-content: center;
				text-align: center;

				.imgbox {
					width: 120px;

					image {
						width: 100%;
					}
				}

				.info-title {
					font-size: 20px;
					font-weight: 500;
					margin-top: 10px;
				}

				.infotips {
					font-size: 16px;
					line-height: 24px;
					margin-top: 10px;
				}

				.infobtn {
					button {
						border-radius: 4.5px;
						font-size: 14px;
						text-align: center;
						box-sizing: border-box;
						display: inline-block;
						background-color: #ff5353;
						color: #ffffff;
						cursor: pointer;
						border: 1px solid #ff5353;
						width: fit-content;
						height: 40px;
						line-height: 40px;
						padding: 0px 10px;
						margin-top: 20px;
					}
				}
			}
		}
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

			}
		}

		.pc {
			display: none;
		}
	}
</style>